<template>
<div>
	<div class="recommend-title">热销推荐</div>
	<ul class="item-box">
		<li class="item border-bottom" v-for="item of list">
			<div class="item-img-box">
				<img class="itme-img" :src="item.imgUrl"/>
			</div>
			<div class="itme-right-txt">
				<p class="itme-title ellipsis">{{item.title}}</p>
				<p class="itme-desc ellipsis">{{item.desc}}</p>
				<button>查看详情</button>
			</div>
		</li>
	</ul>
</div>
</template>

<script> 
	export default {
		name:'HomeRecommend',
		props:{
			list:Array
		}
  	}	
</script>

<style scoped>
	.recommend-title{
		line-height: .6rem;
		margin-top: .2rem;
		text-indent: .2rem;`z
		padding-bottom: 0.2rem;
	}
	.item-box{
		margin-left: 0.1rem;
	}
	.item{
		height: 2.4rem;
	}
	.item-img-box{
		float: left;
	}
	.itme-img{
		width: 2rem;
		height: 2rem;
	}
	.itme-right-txt{
		float: left;
		margin-left: 0.2rem;
	}
	.itme-title{
		font-size: 0.32rem;
		margin-top: 0.2rem;
		width: 4.7rem;
	}
	.itme-desc{
		color: #616161;
		font-size: .24rem;
		margin-top: .2rem;
	}
	.itme-right-txt button{
		margin-top: .36rem;
		font-size: .28rem;
		padding: 0.08rem;
		border-radius: 0.1rem;
		background: #ff9300;
		color: #fff;
	}
</style>